<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 Cadillac CT6 Object DBC</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .error { color: red; font-weight: bold; }
        .success { color: green; font-weight: bold; }
        .warning { color: orange; }
        pre { background: #f9f9f9; padding: 10px; border: 1px solid #ddd; overflow-x: auto; max-height: 400px; }
        .stats { display: flex; gap: 20px; margin: 10px 0; }
        .stat-item { background: #f0f0f0; padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>测试 Cadillac CT6 Object DBC 解析</h1>
    
    <input type="file" id="fileInput" accept=".dbc">
    <button onclick="loadAndParse()">加载并解析</button>
    
    <div id="result"></div>

    <script src="dbc-parser.js"></script>
    <script>
        async function loadAndParse() {
            const fileInput = document.getElementById('fileInput');
            const resultDiv = document.getElementById('result');
            
            if (!fileInput.files.length) {
                // 如果没有选择文件，使用默认路径
                try {
                    const response = await fetch('../opendbc/opendbc/dbc/cadillac_ct6_object.dbc');
                    const content = await response.text();
                    parseContent(content, 'cadillac_ct6_object.dbc');
                } catch (error) {
                    resultDiv.innerHTML = `<div class="error">无法加载默认文件: ${error.message}</div>`;
                }
                return;
            }
            
            const file = fileInput.files[0];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                parseContent(e.target.result, file.name);
            };
            
            reader.readAsText(file);
        }
        
        function parseContent(content, filename) {
            const resultDiv = document.getElementById('result');
            const startTime = performance.now();
            
            try {
                console.log(`开始解析 ${filename}...`);
                const database = parseDBCContent(content, filename);
                const endTime = performance.now();
                const parseTime = (endTime - startTime).toFixed(2);
                
                resultDiv.innerHTML = `
                    <div class="success">✓ 解析成功！(耗时: ${parseTime}ms)</div>
                    
                    <div class="stats">
                        <div class="stat-item">
                            <strong>帧数量:</strong> ${database.frames.length}
                        </div>
                        <div class="stat-item">
                            <strong>节点数量:</strong> ${database.nodes.length}
                        </div>
                        <div class="stat-item">
                            <strong>警告数量:</strong> ${database.warnings.length}
                        </div>
                    </div>
                    
                    ${database.warnings.length > 0 ? `
                        <h3>警告信息 (前10条):</h3>
                        <div class="warnings">
                            ${database.warnings.slice(0, 10).map(w => 
                                `<div class="warning">行 ${w.line}: ${w.message}</div>`
                            ).join('')}
                            ${database.warnings.length > 10 ? `<div class="warning">... 还有 ${database.warnings.length - 10} 条警告</div>` : ''}
                        </div>
                    ` : ''}
                    
                    <h3>帧信息 (前5帧):</h3>
                    <div class="frames">
                        ${database.frames.slice(0, 5).map(frame => `
                            <div style="margin: 10px 0; padding: 10px; background: #f5f5f5; border-radius: 5px;">
                                <strong>${frame.name}</strong> (ID: 0x${frame.canId.toString(16).toUpperCase()}, DLC: ${frame.dlc})
                                <br>信号数量: ${frame.signals.length}
                                ${frame.comment ? `<br>注释: ${frame.comment}` : ''}
                            </div>
                        `).join('')}
                        ${database.frames.length > 5 ? `<div>... 还有 ${database.frames.length - 5} 帧</div>` : ''}
                    </div>
                `;
            } catch (error) {
                console.error('解析失败:', error);
                resultDiv.innerHTML = `<div class="error">✗ 解析失败: ${error.message}</div>`;
            }
        }
        
        // 页面加载时自动尝试加载文件
        window.onload = function() {
            loadAndParse();
        };
    </script>
</body>
</html> 